<template>
  <el-dialog :title="title" :visible="show" :before-close="cancel">
    <el-form label-width="100px" :model="form" ref="form" :rules="rules">
      <el-col>
        <BaseFormInput
          label="账户名称"
          prop="name"
          :span="24"
          labelwidth="100px"
          v-model="form.name"
        />
        <BaseFormSelect
          v-model="form.code"
          :span="14"
          labelwidth="100px"
          label="账户名称"
          :options="options"
        />
        <BaseFormDatePicker
          v-model="form.date"
          :span="14"
          labelwidth="100px"
          label="日期"
        />
      </el-col>
    </el-form>
    <span slot="footer">
      <el-button @click="cancel" icon="el-icon-close">取消</el-button>
      <el-button
        class="btnStyle"
        icon="el-icon-check"
        @click="submit"
        :loading="loading"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
// components & widgets
import { rules } from "./config";

// 其它

export default {
  name: "EditModal",
  props: {
    show: {
      type: Boolean,
    },
    info: {
      type: Object,
    },
  },
  data() {
    return {
      title: "",
      loading: false,
      form: {
        name: "",
        code: "",
        date: "",
      },
      rules: rules,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  watch: {
    // 监听弹窗显示隐藏
    show(newVal) {
      if (newVal) {
        const form = this.$refs.form;
        form && form.resetFields();
        this.title = this.info ? "编辑管理员账户" : "添加管理员账户";
        // 设置简单值
        this.form.name = this.info?.sysUserName || "";
        this.form.code = "";
        // 设置复杂值
        if (this.info) {
          // TODO
        }
      }
    },
  },
  methods: {
    // 关闭弹窗
    cancel() {
      this.$emit("close");
    },
    submit() {
      console.log(this.form);
      const form = this.$refs.form;
      form.validate((valid) => {
        if (!valid) return;
        if (this.info) {
          this.edit();
        } else {
          this.add();
        }
      });
    },
    add() {
      
    },
    edit() {
     
    },
  },
};
</script>

<style lang="scss"></style>
